import React, { useState } from 'react';
import IconFont from '../IconFont';
import styles from './index.less';
import moment from 'moment';
import ReactECharts from 'echarts-for-react';
import { mmConversionPx } from '@/utils/transpxmm';



function ACharts({ config, setconfig, collapsed, layer }) {

    const linecomp = (type, it) => {
        let base = it.width > it.height ? it.height : it.width;
        base = it.unit == "mm" ? mmConversionPx(base) : base;
        return {
            type,
            id: moment().valueOf(),
            option: {
                // title: {
                //     text: '条形图标题',
                //     left: "center",
                //     top:12
                // },
                color: ["#1dac57", "#ff4800"],
                tooltip: {
                    show: false
                },
                legend: {
                },
                grid: {
                    top: "4%",
                    left: '2%',
                    right: '4%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    show: false,
                },
                yAxis: {
                    type: 'category',
                    data: ['巴西', '印度尼西亚', '美国', '印度', '中国', '世界'],
                    axisLabel: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                series: [
                    {
                        name: '2011',
                        type: 'bar',
                        label: {
                            show: true,
                            formatter: '{c}',
                            align: "left",
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        data: [18203, 23489, 29034, 104970, 131744, 630230]
                    },
                    {
                        name: '2012',
                        type: 'bar',
                        label: {
                            show: true,
                            formatter: '{c}',
                            align: "left",
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        data: [19325, 23438, 31000, 121594, 134141, 681807]
                    }
                ]
            },
            style: {
                zIndex: it.components.length + 1,
                left: 0,
                top: 0,
                backgroundColor: "#FFFFFF",
                width: base / 2,
                height: base / 2,
            }
        }
    }, barcomp = (type, it) => {
        let base = it.width > it.height ? it.height : it.width;
        base = it.unit == "mm" ? mmConversionPx(base) : base;
        return {
            type,
            id: moment().valueOf(),
            option: {
                // title: {
                //     text: '条形图标题',
                //     left: "center",
                //     top:12
                // },
                color: ["#1dac57", "#ff4800"],
                tooltip: {
                    show: false
                },
                legend: {
                },
                grid: {
                    top: "4%",
                    left: '2%',
                    right: '4%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['巴西', '印度尼西亚', '美国', '印度', '中国', '世界'],
                    axisLabel: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],

                },
                series: [
                    {
                        name: '2011',
                        type: 'bar',
                        label: {
                            show: true,
                            formatter: '{c}',
                            align: "center",
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        data: [18203, 23489, 29034, 104970, 131744, 630230]
                    },
                    {
                        name: '2012',
                        type: 'bar',
                        label: {
                            show: true,
                            formatter: '{c}',
                            align: "center",
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        data: [19325, 23438, 31000, 121594, 134141, 681807]
                    }
                ]
            },
            style: {
                zIndex: it.components.length + 1,
                left: 0,
                top: 0,
                backgroundColor: "#FFFFFF",
                width: base / 2,
                height: base / 2,
            }
        }
    }, radarcomp = (type, it) => {
        let base = it.width > it.height ? it.height : it.width;
        base = it.unit == "mm" ? mmConversionPx(base) : base;
        return {
            type,
            id: moment().valueOf(),
            option: {
                color: [
                    'rgba(45,185,101,0.5)',
                    'rgba(45,78,185,0.5)'
                ],
                legend: {

                },
                radar: {
                    shape: 'circle',
                    indicator: [
                        { name: '语文', max: 100 },
                        { name: '数学', max: 100 },
                        { name: '英语', max: 100 },
                        { name: '物理', max: 100 },
                        { name: '化学', max: 100 },
                        { name: '地理', max: 100 }
                    ]
                },
                series: [
                    {
                        name: '考试成绩',
                        type: 'radar',
                        data: [
                            {
                                value: [30, 12, 68, 58, 99, 95],
                                name: '期中',
                                areaStyle: {
                                    color: "rgba(45,185,101,0.5)"
                                }
                            },
                            {
                                value: [40, 68, 88, 99, 100, 96],
                                name: '期末',
                                areaStyle: {
                                    color: "rgba(45,78,185,0.5)"
                                }
                            }
                        ]
                    }
                ]
            },
            style: {
                zIndex: it.components.length + 1,
                left: 0,
                top: 0,
                backgroundColor: "#FFFFFF",
                width: base / 2,
                height: base / 2,
            }
        }
    }


    return (
        <div className={styles.container}>
            <div className={`${styles.item} center`} onClick={() => {
                setconfig(s => {
                    let newcf = { ...s };
                    newcf.pages = newcf.pages.map(it => {
                        if (it.active) {
                            it.components = it.components ?? [];
                            it.components.push(linecomp("Linechart", it))
                        }
                        return it
                    })
                    return newcf
                })
            }}>
                <div className="center" >
                    <IconFont type='icon-tiaoxingtu-' style={{ color: "#1dac57" }}></IconFont>
                    <span>
                        条形图
                    </span>
                </div>

                <div style={{ width: 0, height: 100, marginTop: 10, overflow: "hidden", transition: "all 0.2s" }}>
                    <div style={{ width: 500, height: 500, transform: "scale(0.2)", transformOrigin: "left top" }}>
                        <ReactECharts option={{
                            color: ["#1dac57"],
                            tooltip: {
                                show: false
                            },
                            legend: {
                                show: false
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                show: false
                            },
                            yAxis: {
                                type: 'category',
                                data: ['巴西', '印度尼西亚', '美国', '印度', '中国', '世界'],
                                show: false
                            },
                            series: [
                                {
                                    name: '2011',
                                    type: 'bar',
                                    data: [18203, 23489, 29034, 104970, 131744, 630230]
                                },
                            ]
                        }} />
                    </div>
                </div>
            </div>

            <div className={`${styles.item} center`} onClick={() => {
                setconfig(s => {
                    let newcf = { ...s };
                    newcf.pages = newcf.pages.map(it => {
                        if (it.active) {
                            it.components = it.components ?? [];
                            it.components.push(barcomp("Barchart", it))
                        }
                        return it
                    })
                    return newcf
                })
            }}>
                <div className="center">
                    <IconFont type='icon-zhuzhuangtu' style={{ color: "#1dac57", fontSize: 16 }}></IconFont>
                    <span>
                        柱状图
                    </span>
                </div>

                <div style={{ width: 0, height: 100, marginTop: 10, overflow: "hidden", transition: "all 0.2s" }}>
                    <div style={{ width: 500, height: 500, transform: "scale(0.2)", transformOrigin: "left top" }}>
                        <ReactECharts option={{
                            color: ["#1dac57"],
                            tooltip: {
                                show: false
                            },
                            legend: {
                                show: false
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                show: false,
                                type: 'category',
                                data: ['巴西', '印度尼西亚', '美国', '印度', '中国', '世界'],
                            },
                            yAxis: {

                                show: false
                            },
                            series: [
                                {
                                    name: '2011',
                                    type: 'bar',
                                    data: [18203, 25034, 29034, 104970, 131744, 148571]
                                },
                            ]
                        }} />
                    </div>
                </div>
            </div>

            <div className={`${styles.item} center`} onClick={() => {
                setconfig(s => {
                    let newcf = { ...s };
                    newcf.pages = newcf.pages.map(it => {
                        if (it.active) {
                            it.components = it.components ?? [];
                            it.components.push(radarcomp("Radarchart", it))
                        }
                        return it
                    })
                    return newcf
                })
            }}>
                <div className="center">
                    <IconFont type='icon-zhuzhuangtu' style={{ color: "#1dac57", fontSize: 16 }}></IconFont>
                    <span>
                        雷达图
                    </span>
                </div>

                <div style={{ width: 0, height: 100, marginTop: 10, overflow: "hidden", transition: "all 0.2s" }}>
                    <div style={{ width: 500, height: 500, transform: "scale(0.2)", transformOrigin: "left top" }}>
                        <ReactECharts option={{
                            legend: {
                                show: false
                            },
                            radar: {
                                shape: 'circle',
                                indicator: [
                                    { name: '语文', max: 100 },
                                    { name: '数学', max: 100 },
                                    { name: '英语', max: 100 },
                                    { name: '物理', max: 100 },
                                    { name: '化学', max: 100 },
                                    { name: '地理', max: 100 }
                                ]
                            },
                            series: [
                                {
                                    name: '考试成绩',
                                    type: 'radar',
                                    data: [
                                        {
                                            value: [30, 12, 68, 58, 99, 95],
                                            name: '期中',
                                            areaStyle: {
                                                color: "#2db9656e"
                                            }
                                        },
                                        {
                                            value: [40, 68, 88, 99, 100, 96],
                                            name: '期末',
                                            areaStyle: {
                                                color: "#2d47b981"
                                            }
                                        }
                                    ]
                                }
                            ]
                        }} />
                    </div>
                </div>
            </div>




        </div>
    );
}

export default ACharts;